<template>
  <el-row :gutter="10">
    <el-col :span="4" class="left"><div class="title"><span>丨</span>品种列表</div><hr>
      <ul class="varietyul">
        <li v-for="(item,index) in key" :key="index" class="li" @click="change(index)">{{ item }}</li>
      </ul>
    </el-col>
    <el-col :span="19" class="right">

      <div class="search">
        <el-input
      :prefix-icon="Search"
      placeholder="请输入搜索名称"
      v-model="search"
      ></el-input>
      </div>
        
      


      <ul class="imgul">
        <li class="imgli" v-for="(item,index) in show" :key="index" @click="open(index)">
          <el-card class="card">
            <div class="img">
              <img src="@/assets/noimg.png">
            </div>
            
            <div class="text">{{ item.name }}</div>
          </el-card>
        </li>
      </ul>
   
      
  
      
    </el-col>
  </el-row>


  <el-drawer v-model="drawer" class="drawer">
    <div class="img">
      <img src="@/assets/noimg.png">
    </div>
      <div class="feature">特点：{{ data[varietyChoose][showIndex].feature }}</div>
      <div class="intro">介绍：{{ data[varietyChoose][showIndex].introduce }}</div>
    
  </el-drawer>
</template>

<script setup>
import { varietyStore } from '@/store/Service/variety';
import { computed, onMounted,reactive,ref } from 'vue';
import { Search } from '@element-plus/icons-vue';
const {data} = varietyStore()
const key = Object.keys(data)
const varietyChoose = ref('鱼类')
const showIndex = ref()
const drawer = ref(false)
const search = ref('')
const show = computed(()=>
  data[varietyChoose.value].filter(data=>!search.value||data.name.includes(search.value)
  )
)
onMounted(()=>{
  const ul=document.querySelectorAll('.varietyul .li')
  ul[0].classList.add('active')
  varietyChoose.value = ul[0].innerText
})

function change(index){
    const ul=document.querySelectorAll('.varietyul .li')
    for(let i = 0;i<ul.length;i++){
      ul[i].classList.remove('active')      
    }    
    ul[index].classList.add('active')
    varietyChoose.value = ul[index].innerText
  }

function open(index){
  drawer.value = true
  showIndex.value = index
}

</script>

<style scoped lang="scss">
*{
  margin: 0;
  padding: 0;
  list-style: none;
}
.header{
  float: left;
  width: 100%;
  font-size: .5556rem;
  margin-bottom: .1852rem;
  span{
    color: skyblue;
    font-size: .5556rem;
  }
}
.left{
  margin: 1vh 0 0 1vw ;
  height: 89vh;
  box-shadow: 0 0 .1852rem rgba(0, 0, 0, .2);
  font-size: .3704rem;
  overflow: hidden;
  span{
    color: skyblue;
    font-size: .3704rem;
  }
}
.right {
  margin: 1vh 0 0 1vw;
  height: 89vh;
  box-shadow: 0 0 .1852rem rgba(0, 0, 0, .2);
  overflow: auto;
}
.title{
  margin: 10px 0;
}
.search{
  width: 30%;
  margin: 1% 0 0 0;
}
.li{
  padding: .0926rem 0 .1852rem .1852rem;
  cursor: pointer;
  transition: all .4s;
}
.active{
  background-color: rgba(238, 245, 254,1);
  color: skyblue;
}
.li:hover{
  background-color: rgba(238, 245, 254,1);
}
.imgul{
  display: flex;
  flex-wrap: wrap;
  gap: 5%;
  margin: 1% 0 0 0 ;
  justify-content: left;
}
.imgli{
  margin-bottom: 3%;
  flex: 0 0 21%;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid rgba(0,0,0,.2);
  &:hover{
    box-shadow: 0 0 .1852rem rgba(0, 0, 0, .2);
  }
  .card{
    width: 100%;
    height: 20vh;
    .img{
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    img{
      margin: auto;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .text{
    text-align: center;
  }
}
.drawer{
  .img{
    text-align: center;
  }
  div{
    font-size: .3704rem;
    margin-bottom: 10px;
  }
}
</style>